<template>
  <div class="chart-card">
    <div class="chart-header">
      <span class="title" v-if="type === 'coach'">全省教练员数量-分布情况</span>
      <span class="title" v-else>全省文化教师数量-分布情况</span>
    </div>
    <div class="radio-group-wrapper">
      <el-radio-group v-model="activeTab" size="small" @change="initChart">
        <el-radio-button label="在编">在编</el-radio-button>
        <el-radio-button label="外聘">外聘</el-radio-button>
      </el-radio-group>
    </div>
    <div style="display: flex;justify-content: space-between;">
      <div class="chart-content">
        <h4>年龄分布</h4>
        <div class="chart-area">
          <div class="total-number">{{ totalAge }}</div>
          <div ref="chart1" class="chart-container"></div>
        </div>
        <div class="data-list">
          <div
            class="data-item"
            v-for="(item, index) in chartData1"
            :key="index"
          >
            <div class="item-name">
              <span
                class="color-dot"
                :style="{ backgroundColor: item.color }"
              ></span>
              <span>{{ item.name }}</span>
            </div>
            <div class="item-value">{{ formatNumber(item.value) }}</div>
          </div>
        </div>
      </div>
      <div class="chart-content">
        <h4>学历分布</h4>
        <div class="chart-area">
          <div class="total-number">{{ totalBen }}</div>
          <div ref="chart2" class="chart-container"></div>
        </div>
        <div class="data-list">
          <div
            class="data-item"
            v-for="(item, index) in chartData2"
            :key="index"
          >
            <div class="item-name">
              <span
                class="color-dot"
                :style="{ backgroundColor: item.color }"
              ></span>
              <span>{{ item.name }}</span>
            </div>
            <div class="item-value">{{ formatNumber(item.value) }}</div>
          </div>
        </div>
      </div>
      <div class="chart-content">
        <h4>级别分布</h4>
        <div class="chart-area">
          <div class="total-number">{{ totalLevel }}</div>
          <div ref="chart3" class="chart-container"></div>
        </div>
        <div class="data-list">
          <div
            class="data-item"
            v-for="(item, index) in chartData3"
            :key="index"
          >
            <div class="item-name">
              <span
                class="color-dot"
                :style="{ backgroundColor: item.color }"
              ></span>
              <span>{{ item.name }}</span>
            </div>
            <div class="item-value">{{ formatNumber(item.value) }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { sheet2_module_teach_data } from "@/api/statistics";
import { sheet2_module_coach_data } from "@/api/statistics";
export default {
  name: "SchoolPieChart",
  props: ["type"],
  data() {
    return {
      chart: null,
      activeTab: "在编",
      chartData1: [],
      chartData2: [],
      chartData3: [],
      totalAge: 0,
      totalBen: 0,
      totalLevel: 0,
      dict_color: [
        "#f56c6c",
        "#e6a23c",
        "#5cb87a",
        "#1989fa",
        "#6f7ad3",
        "#909399",
        "#e6a23c"
      ]
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    formatNumber(num) {
      return num.toLocaleString();
    },
    async initChart() {
      let res = null;
      if (this.type == "coach") {
        res = await sheet2_module_coach_data({
          year: new Date().getFullYear(),
          onOrOut: this.activeTab
        });
      } else {
        res = await sheet2_module_teach_data({
          year: new Date().getFullYear(),
          onOrOut: this.activeTab
        });
      }
      this.totalAge = res.data.totalAge;
      this.totalBen = res.data.totalBen;
      this.totalLevel = res.data.totalLevel;

      this.chartData1 = res.data.ageList.map((item, index) => {
        item["color"] = this.dict_color[index];
        return item;
      });
      this.chartData2 = res.data.benList.map((item, index) => {
        item["color"] = this.dict_color[index];
        return item;
      });
      this.chartData3 = res.data.levelList.map((item, index) => {
        item["color"] = this.dict_color[index];
        return item;
      });
      this.chart1 = echarts.init(this.$refs.chart1);
      this.chart2 = echarts.init(this.$refs.chart2);
      this.chart3 = echarts.init(this.$refs.chart3);
      const option1 = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)"
        },
        series: [
          {
            type: "pie",
            radius: ["65%", "80%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: this.chartData1,
            emphasis: {
              scale: true,
              scaleSize: 10
            }
          }
        ]
      };
      const option2 = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)"
        },
        series: [
          {
            type: "pie",
            radius: ["65%", "80%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: this.chartData2,
            emphasis: {
              scale: true,
              scaleSize: 10
            }
          }
        ]
      };
      const option3 = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)"
        },
        series: [
          {
            type: "pie",
            radius: ["65%", "80%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: this.chartData3,
            emphasis: {
              scale: true,
              scaleSize: 10
            }
          }
        ]
      };
      this.chart1.setOption(option1);
      this.chart2.setOption(option2);
      this.chart3.setOption(option3);
      // 监听父元素大小变化
      var ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;
          this.chart1.resize();
          this.chart2.resize();
          this.chart3.resize();
          // console.log("Element:", entry.target);
          // console.log(`Element size: ${cr.width}px x ${cr.height}px`);
          // console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
        }
      });

      ro.observe(this.$refs.chart1);
      ro.observe(this.$refs.chart2);
      ro.observe(this.$refs.chart3);
    }
  }
};
</script>

<style scoped>
.chart-card {
  height: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.chart-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  height: 100%;
  justify-content: space-between;
}

.chart-area {
  width: 100%;
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-group-wrapper {
  background-color: #f5f7fa;
  margin: 10px 0;
}

.total-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 150%;
  font-weight: bold;
  color: #303133;
}

.chart-container {
  width: 100%;
  height: 200px;
}

.data-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 50px;
}

.data-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.item-name {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
  text-align: center;
  min-width: 120px;
  justify-content: start;
}

.color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

.item-value {
  color: #303133;
  font-weight: bold;
  font-size: 18px;
  width: 100%;
  text-align: left;
  padding-left: 16px;
}
</style>
